<!-- 院端--待结算明细 -->
<template>
  <div class="await-settle">
    <el-container class="template-box">
      <div>
        <el-button
          type="primary"
          @click="handleSettle">
          <i class="el-icon-document"/>
          生成结算</el-button>
      </div>
      <!-- 头部搜索 -->
      <el-header height="auto">
        <el-form
          v-model="searchData"
          :inline="true">
          <el-form-item label="院内编码">
            <el-input v-model="searchData.hospitalSpdCode"/>
          </el-form-item>
          <el-form-item label="产品名称">
            <el-input v-model="searchData.deliveryProductName"/>
          </el-form-item>
          <el-form-item label="配送商产品编码">
            <el-input v-model="searchData.deliveryProductCode"/>
          </el-form-item>
          <el-form-item label="配送商">
            <el-input v-model="searchData.deliveryName"/>
          </el-form-item>
          <el-form-item label="入库日期">
            <el-date-picker
              v-model="searchData.revenueDate"
              type="date"
              placeholder="选择日期"/>
          </el-form-item>
          <el-form-item label="订单号">
            <el-input v-model="searchData.saleOrder"/>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="searchForm"
              :class="{'isAddWidth':submitLoading}"
              :loading="submitLoading"
            >
              <i
                class="iconfont el-icon-search"
                :class="{'isdisplay':submitLoading}" />
              {{ submitLoading?'':'查询' }}</el-button>
            <el-button
              type="primary"
              @click="resetForm">
              <i class="iconfont el-icon-refresh-right"/>
              重置</el-button>
          </el-form-item>
        </el-form>
      </el-header>
      <!-- 列表 -->
      <el-editable
        v-loading="tableLoading"
        :data="dataList"
        height="200"
        :columns="indexTableColumns"
        @selection-change="handleSelectionChange"
      >
        <template
          slot-scope="scope"
          slot="default-settleStatus"
        >
          {{ scope.row.settleStatus==1 ? '是' : '否' }}
        </template>
      </el-editable>
      <!-- 分页模块 -->
      <el-pagination
        align="right"
        style="margin-top:10px;"
        @size-change="sizeChange"
        @current-change="pageChange"
        :page-sizes="PAGE_NUMBER"
        :page-size="pageSize"
        :current-page="curPage"
        :layout="PAGINATION_LAYOUT"
        :total="totalElements"/>
    </el-container>
  </div>
</template>

<script>
import {
  querySettlePurchaserItemList
} from '@const/beforeSettleApi'
import { indexTableColumns } from './const'
import { hasIn, chunk } from 'lodash'
import paginationMixin from '@mixins/paginationMixin'
import SearchForm from '@components/businesscomponents/search'
import ElEditable from '@components/el-editable'
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common'
export default {
  mixins: [paginationMixin],
  components: { ElEditable, SearchForm },
  data () {
    return {
      submitLoading: false,
      searchData: {}, // 搜索返回内容
      tableLoading: false, // 列表loading
      indexTableColumns, // 列表表头
      dataList: [], // 列表数据
      selectList: [], // 所有打勾的数据
      curPage: 1, // 当前页
      PAGE_NUMBER, // 页码数组
      PAGINATION_LAYOUT, // 页码功能布局
      pageSize: PAGE_NUMBER[0], // 一页的数量
      totalElements: 0 // 总共的条数
    }
  },
  mounted () {
    this.getList()
    let arr = [
      { type: 'button', val: '返回', handle: this.back }
    ]
    const btn = {
      type: 'btn',
      arr: arr
    }
    this.$store.commit('changeLayoutHandle', btn)
  },
  methods: {
    // 点击返回
    back () {
      this.$router.go(-1)
    },

    // ✔勾选的时候触发
    handleSelectionChange (val) {
      console.log(val)
      this.selectList = val
    },

    // 获取待结算列表
    getList () {
      this.submitLoading = true
      this.$axios({
        method: 'post',
        // url: 'http://47.110.130.245:3000/mock/155/guoke-deepexi-order-center/api/v1/beforeSettle/SettleDistributor/querySettlePurchaserItemList',
        url: querySettlePurchaserItemList,
        data: {
          ...this.searchData,
          page: this.curPage,
          pageSize: this.pageSize
        }
      }).then(res => {
        let result = hasIn(res, ['data', 'payload']) ? res.data.payload : []
        this.dataList = result.content
        this.totalElements = result.totalElements
      }).finally(() => {
        this.submitLoading = false
      })
    },

    // 点击生成结算
    handleSettle () {
      this.$router.push('/hospitalSide/settlementManagement/settleOrderList')
    },

    // 搜索功能-点击查询
    searchForm () {
      this.curPage = 1
      this.getList()
    },

    // 搜索功能-点击重置
    resetForm () {
      this.curPage = 1
      this.searchData = {}
    },
    // 页码更改
    sizeChange (size) {
      this.pageSize = size
      this.getList()
    },

    // 切换不一样的页面,重置一切数据
    pageChange (curPage) {
      this.curPage = curPage
      this.getList()
    }
  }

}
</script>

<style lang="less">
.await-settle {
  .template-box {
    height: 100%;
    overflow: auto;

    .pagination {
      display: flex;
      justify-content: flex-end;
      padding-right: 0;
    }
  }
}
</style>
